<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			canvas {
				border: solid 1px #f0f0f0;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas"></canvas>
		<script>
			const canvas = document.getElementById("myCanvas");
			canvas.width = 800;
			canvas.height = 800;
			const ctx = canvas.getContext("2d");
			let angle = 0;

			const config = {
				lineColor: "#2C3137",
				progressColor: "#F6475D",
				backgroundColor: "#171A1F",
				fontSize: 20,
				radius: 200,
				lineWidth: 12,
                distance: 30
			};

            let timer = 0;

			// loop();

            init(canvas, 80);

            function init(canvas, angle){
                update(canvas, angle);
            }
            
            function loop(){
                update(canvas, angle);
                angle = Math.abs(Math.sin(++timer * 0.01)) * 180;
                requestAnimationFrame(loop);
            }

			function update(canvas, angle) {
				
                ctx.save();
				ctx.fillStyle = config.backgroundColor;
				ctx.fillRect(0, 0, canvas.width, canvas.height);


				// 设置弧线的属性
				ctx.lineWidth = config.lineWidth; // 设置线宽为4px
				ctx.strokeStyle = config.config; // 设置线的颜色
				ctx.lineCap = "round";

				// 开始路径
				ctx.beginPath();
                ctx.fillStyle = config.lineColor;

				// 绘制半圆弧线
				const centerX = canvas.width / 2; // 圆心的X坐标
				const centerY = canvas.height / 2; // 圆心的Y坐标
				// const radius = 200; // 半径
				const startAngle = Math.PI; // 起始角度 (180度)
				const endAngle = 0; // 结束角度 (0度)
				const counterclockwise = false; // 逆时针方向 (开口向下)

				ctx.arc(centerX, centerY, config.radius, startAngle, endAngle, counterclockwise);

				// 绘制弧线
				ctx.stroke();

                // 0 --- s + Math.PI * 0.5
                // 90 --- s + Math.PI * 1
                // -90 --- s + Math.PI * 1

                // -90----0-----90
                // -1-----0.5---1
				let aim = startAngle + a2r(angle);
				ctx.beginPath();
				ctx.strokeStyle = config.progressColor; // 设置线的颜色
				ctx.lineCap = "butt";
				ctx.arc(centerX, centerY, config.radius, startAngle, aim, counterclockwise);
				ctx.stroke();

				ctx.beginPath();
				ctx.strokeStyle = config.progressColor; // 设置线的颜色
				ctx.lineCap = "round";
				ctx.arc(centerX, centerY, config.radius, startAngle, startAngle + a2r(0.1), counterclockwise);
				ctx.stroke();

				let distance = config.radius + config.distance;

                ctx.font = config.fontSize + "px arial";
                ctx.fillStyle = "#ffffff";
				ctx.textAlign = "center";
				ctx.fillText("中立", centerX, centerY - distance);

				ctx.textAlign = "left";
				ctx.fillText("强烈买入", centerX + distance, centerY);

				ctx.fillText("买入", centerX + distance * Math.cos(Math.PI / 4), centerY - distance * Math.sin(Math.PI / 4));

				ctx.textAlign = "right";
				ctx.fillText("强烈卖出", centerX - distance, centerY);

				ctx.fillText("卖出", centerX - distance * Math.cos(Math.PI / 4), centerY - distance * Math.sin(Math.PI / 4));

				ctx.textAlign = "center";
				ctx.fillText("中立", centerX, centerY + 40);

				ctx.fillStyle = "#ffffff";
				ctx.translate(centerX, centerY);
				ctx.rotate(a2r(angle - 90));
				ctx.beginPath();
				ctx.moveTo(0, -config.radius * 0.8);
				ctx.lineTo(-7, 0);
				ctx.lineTo(7, 0);
				ctx.fill();

				ctx.beginPath();
				ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
				ctx.fill();

                ctx.restore();
			}

			function a2r(n) {
				return n * (Math.PI / 180);
			}
		</script>
	</body>
</html>
